import React, { Component } from 'react';
import Style from './index.module.scss';
import { Layout, Icon } from 'antd';
import { RouteComponentProps, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { StoreType } from '../../store/types'
import HeaderCom from './com/header'
import MenuCom from './com/menu'
// import AuthDom from 'components/auth'
import RouterCom from './com/router'

const { Content, Footer, Sider } = Layout;

interface StateInterface {
}

interface PropsInterface extends RouteComponentProps {
  isLogin: boolean
}

class Admin extends Component<PropsInterface, StateInterface> {

  constructor(props: PropsInterface) {
    super(props)
    this.homeClick = this.homeClick.bind(this)
  }

  homeClick() {
    this.props.history.push('/')
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    const { isLogin } = this.props
    if (!isLogin) {
      return <Redirect to={ '/login' } />;
    }

    return (
      <Layout>
        <Sider
          style={{
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
          }}
        >
          <div className={ `${Style.logo} w-flex-center` } style={ { height: '60px' } }>
            <Icon onClick={ this.homeClick } className={ Style['logo-icon'] } type="home" />
          </div>
          <MenuCom />
        </Sider>
        <Layout style={{ marginLeft: 200 }}>
          <HeaderCom />
          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
            <div className={ Style.content }>
              <RouterCom></RouterCom>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>只在乎你！</Footer>
        </Layout>
      </Layout>
    );
  }
}

const mapStateToProps = (state: StoreType) => {
  return {
    isLogin: state.auth.user ? true : false,
    userIcon: state.auth.icon
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {}
}

const classModel = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    forwardRef: true
  }
)(Admin)
export default classModel
